<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>LoveIt主题美化(二) - kwwgoo</title><meta name="Description" content="kwwwgoo&#39;s blog"><meta property="og:title" content="LoveIt主题美化(二)" />
<meta property="og:description" content="LoveIt主题美化" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://kwwgoo.github.io/posts/2021-3-12/" />
<meta property="og:image" content="http://kwwgoo.github.io/logo.png"/>
<meta property="article:published_time" content="2021-03-12T19:48:18+08:00" />
<meta property="article:modified_time" content="2021-03-12T19:48:18+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://kwwgoo.github.io/logo.png"/>

<meta name="twitter:title" content="LoveIt主题美化(二)"/>
<meta name="twitter:description" content="LoveIt主题美化"/>
<meta name="application-name" content="kwwgoo">
<meta name="apple-mobile-web-app-title" content="kwwgoo"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://kwwgoo.github.io/posts/2021-3-12/" /><link rel="prev" href="http://kwwgoo.github.io/posts/2021-3-10/" /><link rel="next" href="http://kwwgoo.github.io/posts/2021-3-19/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "LoveIt主题美化(二)",
        "inLanguage": "",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/kwwgoo.github.io\/posts\/2021-3-12\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "http:\/\/kwwgoo.github.io\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "Hugo","wordcount":  395 ,
        "url": "http:\/\/kwwgoo.github.io\/posts\/2021-3-12\/","datePublished": "2021-03-12T19:48:18+08:00","dateModified": "2021-03-12T19:48:18+08:00","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": "http:\/\/kwwgoo.github.io\/images\/avatar.png"},"author": {
                "@type": "Person",
                "name": "kwwgoo"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="fixed"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    
    <div class="header-wrapper">
        <a href="https://github.com/kwwgoo" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
        
        <div class="header-title" >
            <a href="/" title="kwwgoo"><span class="header-title-pre">🎉</span>kwwgoo<span class="header-title-post">🎉</span></a>
        </div>
        <div class="menu">
            
            <div class="menu-inner"><a class="menu-item" href="/posts/"><i class='fas fa-home fa-fw'></i> 文章 </a><a class="menu-item" href="/tags/"><i class='fas fa-tags fa-fw'></i> 标签 </a><a class="menu-item" href="/categories/"><i class='fas fa-archive fa-fw'></i> 分类 </a><a class="menu-item" href="/friends/"><i class='fas fa-user-friends fa-fw'></i> 友链 </a><a class="menu-item" href="/about/"><i class='fas fa-user-secret fa-fw'></i> 关于 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="kwwgoo"><span class="header-title-pre">🎉</span>kwwgoo<span class="header-title-post">🎉</span></a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title=""><i class='fas fa-home fa-fw'></i>文章</a><a class="menu-item" href="/tags/" title=""><i class='fas fa-tags fa-fw'></i>标签</a><a class="menu-item" href="/categories/" title=""><i class='fas fa-archive fa-fw'></i>分类</a><a class="menu-item" href="/friends/" title=""><i class='fas fa-user-friends fa-fw'></i>友链</a><a class="menu-item" href="/about/" title=""><i class='fas fa-user-secret fa-fw'></i>关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><progress id="content_progress" value="0"></progress>

    <article class="page single"><h1 class="single-title animated flipInX">LoveIt主题美化(二)</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/kwwgoo" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>kwwgoo</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/"><i class="far fa-folder fa-fw"></i>主题美化</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-03-12">2021-03-12</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 395 字
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 2 分钟&nbsp;<span id="/posts/2021-3-12/" class="leancloud_visitors" data-flag-title="LoveIt主题美化(二)">
                        <i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;次阅读
                    </span>&nbsp;</div>

        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#飘雪效果">飘雪效果</a></li>
    <li><a href="#鼠标样式">鼠标样式</a></li>
    <li><a href="#滚动条">滚动条</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><p>LoveIt主题美化</p>
<blockquote>
<p>本次美化效果引用于大佬<a href="https://www.antmoe.com/posts/a811d614/" target="_blank" rel="noopener noreffer">小康博客</a></p>
</blockquote>
<h2 id="飘雪效果">飘雪效果</h2>
<p><div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">需要引入jquery</div>
        </div>
    </div>
在<code>_custom.js</code>中添加代码</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span><span class="lnt">71
</span><span class="lnt">72
</span><span class="lnt">73
</span><span class="lnt">74
</span><span class="lnt">75
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">snow-container</span> <span class="p">{</span>
  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
  <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">max-width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
  <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">overflow</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">2</span><span class="p">;</span>
  <span class="n">pointer-events</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
 
<span class="p">}</span>

<span class="p">.</span><span class="nc">snow</span> <span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">2</span><span class="p">;</span>
  <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
  <span class="n">pointer-events</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
  <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
          <span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="kp">-webkit-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">snow</span> <span class="kc">linear</span> <span class="kc">infinite</span><span class="p">;</span>
          <span class="k">animation</span><span class="p">:</span> <span class="kc">snow</span> <span class="kc">linear</span> <span class="kc">infinite</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">foreground</span> <span class="p">{</span>
  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&#34;https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png&#34;</span><span class="p">);</span>
  <span class="kp">-webkit-</span><span class="k">animation-duration</span><span class="p">:</span> <span class="mi">15</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-duration</span><span class="p">:</span> <span class="mi">15</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">foreground</span><span class="p">.</span><span class="nc">layered</span> <span class="p">{</span>
  <span class="kp">-webkit-</span><span class="k">animation-delay</span><span class="p">:</span> <span class="mf">7.5</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-delay</span><span class="p">:</span> <span class="mf">7.5</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">middleground</span> <span class="p">{</span>
  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png</span><span class="p">);</span>
  <span class="kp">-webkit-</span><span class="k">animation-duration</span><span class="p">:</span> <span class="mi">20</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-duration</span><span class="p">:</span> <span class="mi">20</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">middleground</span><span class="p">.</span><span class="nc">layered</span> <span class="p">{</span>
  <span class="kp">-webkit-</span><span class="k">animation-delay</span><span class="p">:</span> <span class="mi">10</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-delay</span><span class="p">:</span> <span class="mi">10</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">background</span> <span class="p">{</span>
  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png</span><span class="p">);</span>
  <span class="kp">-webkit-</span><span class="k">animation-duration</span><span class="p">:</span> <span class="mi">30</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-duration</span><span class="p">:</span> <span class="mi">30</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">snow</span><span class="p">.</span><span class="nc">background</span><span class="p">.</span><span class="nc">layered</span> <span class="p">{</span>
  <span class="kp">-webkit-</span><span class="k">animation-delay</span><span class="p">:</span> <span class="mi">15</span><span class="kt">s</span><span class="p">;</span>
          <span class="k">animation-delay</span><span class="p">:</span> <span class="mi">15</span><span class="kt">s</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">@</span><span class="k">-webkit-keyframes</span> <span class="nt">snow</span> <span class="p">{</span>
  <span class="nt">0</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
            <span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">15</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
            <span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">15</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="p">@</span><span class="k">keyframes</span> <span class="nt">snow</span> <span class="p">{</span>
  <span class="nt">0</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
            <span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">-100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">100</span><span class="o">%</span> <span class="p">{</span>
    <span class="kp">-webkit-</span><span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">15</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
            <span class="k">transform</span><span class="p">:</span> <span class="nb">translate3d</span><span class="p">(</span><span class="mi">15</span><span class="kt">%</span><span class="p">,</span> <span class="mi">100</span><span class="kt">%</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><p>然后再<code>baseof.html</code>中粘贴如下代码</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow-container&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow foreground&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow foreground layered&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow middleground&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow middleground layered&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow background&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;snow background layered&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="鼠标样式">鼠标样式</h2>
<p>在<code>_custom.js</code>中引入如下代码</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
    <span class="k">cursor</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur</span><span class="p">),</span>
        <span class="kc">default</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="o">,</span>
<span class="nt">img</span> <span class="p">{</span>
    <span class="k">cursor</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="sx">https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur</span><span class="p">),</span>
        <span class="kc">default</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="滚动条">滚动条</h2>
<p>在<code>_custom.js</code>中添加</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-css" data-lang="css"><span class="c">/* 滚动条 */</span>
<span class="p">::</span><span class="nd">-webkit-scrollbar</span> <span class="p">{</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">height</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">::</span><span class="nd">-webkit-scrollbar-track</span> <span class="p">{</span>
  <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="mi">73</span><span class="p">,</span> <span class="mi">177</span><span class="p">,</span> <span class="mi">245</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">);</span>
  <span class="k">border-radius</span><span class="p">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">::</span><span class="nd">-webkit-scrollbar-thumb</span> <span class="p">{</span>
  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#49b1f5</span><span class="p">;</span>
  <span class="k">background-image</span><span class="p">:</span> <span class="kp">-webkit-</span><span class="nb">linear-gradient</span><span class="p">(</span>
    <span class="mi">45</span><span class="kt">deg</span><span class="p">,</span>
    <span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">)</span> <span class="mi">25</span><span class="kt">%</span><span class="p">,</span>
    <span class="kc">transparent</span> <span class="mi">25</span><span class="kt">%</span><span class="p">,</span>
    <span class="kc">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">,</span>
    <span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">)</span> <span class="mi">50</span><span class="kt">%</span><span class="p">,</span>
    <span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">)</span> <span class="mi">75</span><span class="kt">%</span><span class="p">,</span>
    <span class="kc">transparent</span> <span class="mi">75</span><span class="kt">%</span><span class="p">,</span>
    <span class="kc">transparent</span>
  <span class="p">);</span>
  <span class="k">border-radius</span><span class="p">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">::</span><span class="nd">-webkit-scrollbar-corner</span> <span class="p">{</span>
  <span class="k">background-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">::</span><span class="nd">-moz-selection</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#49b1f5</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><blockquote>
<p>暂时添加这些 等待后续更新</p>
</blockquote></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-03-12</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/2021-3-12/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://kwwgoo.github.io/posts/2021-3-12/" data-title="LoveIt主题美化(二)" data-hashtags="Hugo"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://kwwgoo.github.io/posts/2021-3-12/" data-title="LoveIt主题美化(二)"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/hugo/">Hugo</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>
    
    <div class="post-nav"><a href="/posts/2021-3-10/" class="prev" rel="prev" title="Lovelt主题美化(一)"><i class="fas fa-angle-left fa-fw"></i>Lovelt主题美化(一)</a>
            <a href="/posts/2021-3-19/" class="next" rel="next" title="自动上传Algolia配置">自动上传Algolia配置<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"><div id="valine" class="comment"></div><noscript>
                Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
            </noscript></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">
                

            <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
            <text class="poem_sentence"></text>
            <text class="poem_info"></text>
            <script type="text/javascript">
            jinrishici.load(function(result) {
                var sentence = document.querySelector(".poem_sentence")
                var info = document.querySelector(".poem_info")
                sentence.innerHTML = result.data.content
                info.innerHTML = '——' + result.data.origin.author
            });
            </script>

                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="http://kwwgoo.github.io" target="_blank">kwwgoo</a></span>&nbsp;|&nbsp;由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.80.0">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>

            </div>       
        </div>
    </footer></div>


        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div>
        
        <div class="sidebar_wo">
            <div id="leimu">
              <img src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png" alt="雷姆" 
              onmouseover="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuB.png'" 
              onmouseout="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png'" title="回到顶部">
            </div>
            <div class="sidebar_wo" id="lamu">
              <img src="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png" alt="雷姆" 
              onmouseover="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuB.png'" 
              onmouseout="this.src='https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png'" title="回到底部">
            </div>
          </div><link rel="stylesheet" href="/lib/valine/valine.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/twemoji@13.0.0/dist/twemoji.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{"valine":{"appId":"T6yFoYASkk40FbClQCWh2Fqp-MdYXbMMI","appKey":"ykvPGUitFEBJFju9pT2eonqu","avatar":"mp","el":"#valine","emojiCDN":"https://cdn.jsdelivr.net/npm/emoji-datasource-google@5.0.1/img/google/64/","emojiMaps":{"100":"1f4af.png","alien":"1f47d.png","anger":"1f4a2.png","angry":"1f620.png","anguished":"1f627.png","astonished":"1f632.png","black_heart":"1f5a4.png","blue_heart":"1f499.png","blush":"1f60a.png","bomb":"1f4a3.png","boom":"1f4a5.png","broken_heart":"1f494.png","brown_heart":"1f90e.png","clown_face":"1f921.png","cold_face":"1f976.png","cold_sweat":"1f630.png","confounded":"1f616.png","confused":"1f615.png","cry":"1f622.png","crying_cat_face":"1f63f.png","cupid":"1f498.png","dash":"1f4a8.png","disappointed":"1f61e.png","disappointed_relieved":"1f625.png","dizzy":"1f4ab.png","dizzy_face":"1f635.png","drooling_face":"1f924.png","exploding_head":"1f92f.png","expressionless":"1f611.png","face_vomiting":"1f92e.png","face_with_cowboy_hat":"1f920.png","face_with_hand_over_mouth":"1f92d.png","face_with_head_bandage":"1f915.png","face_with_monocle":"1f9d0.png","face_with_raised_eyebrow":"1f928.png","face_with_rolling_eyes":"1f644.png","face_with_symbols_on_mouth":"1f92c.png","face_with_thermometer":"1f912.png","fearful":"1f628.png","flushed":"1f633.png","frowning":"1f626.png","ghost":"1f47b.png","gift_heart":"1f49d.png","green_heart":"1f49a.png","grimacing":"1f62c.png","grin":"1f601.png","grinning":"1f600.png","hankey":"1f4a9.png","hear_no_evil":"1f649.png","heart":"2764-fe0f.png","heart_decoration":"1f49f.png","heart_eyes":"1f60d.png","heart_eyes_cat":"1f63b.png","heartbeat":"1f493.png","heartpulse":"1f497.png","heavy_heart_exclamation_mark_ornament":"2763-fe0f.png","hole":"1f573-fe0f.png","hot_face":"1f975.png","hugging_face":"1f917.png","hushed":"1f62f.png","imp":"1f47f.png","innocent":"1f607.png","japanese_goblin":"1f47a.png","japanese_ogre":"1f479.png","joy":"1f602.png","joy_cat":"1f639.png","kiss":"1f48b.png","kissing":"1f617.png","kissing_cat":"1f63d.png","kissing_closed_eyes":"1f61a.png","kissing_heart":"1f618.png","kissing_smiling_eyes":"1f619.png","laughing":"1f606.png","left_speech_bubble":"1f5e8-fe0f.png","love_letter":"1f48c.png","lying_face":"1f925.png","mask":"1f637.png","money_mouth_face":"1f911.png","nauseated_face":"1f922.png","nerd_face":"1f913.png","neutral_face":"1f610.png","no_mouth":"1f636.png","open_mouth":"1f62e.png","orange_heart":"1f9e1.png","partying_face":"1f973.png","pensive":"1f614.png","persevere":"1f623.png","pleading_face":"1f97a.png","pouting_cat":"1f63e.png","purple_heart":"1f49c.png","rage":"1f621.png","relaxed":"263a-fe0f.png","relieved":"1f60c.png","revolving_hearts":"1f49e.png","right_anger_bubble":"1f5ef-fe0f.png","robot_face":"1f916.png","rolling_on_the_floor_laughing":"1f923.png","scream":"1f631.png","scream_cat":"1f640.png","see_no_evil":"1f648.png","shushing_face":"1f92b.png","skull":"1f480.png","skull_and_crossbones":"2620-fe0f.png","sleeping":"1f634.png","sleepy":"1f62a.png","slightly_frowning_face":"1f641.png","slightly_smiling_face":"1f642.png","smile":"1f604.png","smile_cat":"1f638.png","smiley":"1f603.png","smiley_cat":"1f63a.png","smiling_face_with_3_hearts":"1f970.png","smiling_imp":"1f608.png","smirk":"1f60f.png","smirk_cat":"1f63c.png","sneezing_face":"1f927.png","sob":"1f62d.png","space_invader":"1f47e.png","sparkling_heart":"1f496.png","speak_no_evil":"1f64a.png","speech_balloon":"1f4ac.png","star-struck":"1f929.png","stuck_out_tongue":"1f61b.png","stuck_out_tongue_closed_eyes":"1f61d.png","stuck_out_tongue_winking_eye":"1f61c.png","sunglasses":"1f60e.png","sweat":"1f613.png","sweat_drops":"1f4a6.png","sweat_smile":"1f605.png","thinking_face":"1f914.png","thought_balloon":"1f4ad.png","tired_face":"1f62b.png","triumph":"1f624.png","two_hearts":"1f495.png","unamused":"1f612.png","upside_down_face":"1f643.png","weary":"1f629.png","white_frowning_face":"2639-fe0f.png","white_heart":"1f90d.png","wink":"1f609.png","woozy_face":"1f974.png","worried":"1f61f.png","yawning_face":"1f971.png","yellow_heart":"1f49b.png","yum":"1f60b.png","zany_face":"1f92a.png","zipper_mouth_face":"1f910.png","zzz":"1f4a4.png"},"enableQQ":false,"highlight":true,"lang":"zh-cn","pageSize":10,"placeholder":"你的评论 ...","recordIP":true,"visitor":true}},"search":{"algoliaAppID":"6C90BU6DO0","algoliaIndex":"index_zh","algoliaSearchKey":"88613b42faafc2ac61f107db18c722b5","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"},"twemoji":true};</script><script type="text/javascript" src="/js/theme.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js"></script>

<script> $(function () {
            $(".site-avatar-plug-bilibili").attr("src", "/images/avatar-plug/bilibili_" + (~~( 128 *Math.random())+1) + ".png");
        }); 
    var avatar_plug = 0;
    var avatar_click = 1;
    jQuery(document).ready(function($) {
         
        var frequency =  1 ;
         
        var plug_count =  128 ;
        $("div.home-avatar a").click(function(e) {
            if (avatar_click % frequency === 0) {
                avatar_plug ++;
                $(".site-avatar-plug-bilibili").attr("src", "/images/avatar-plug/bilibili_" + avatar_plug + ".png");
            }		
            if (avatar_plug === plug_count) {
                avatar_plug = 0;
            }
            $("div.home-avatar a").attr("alt","再点击" + (frequency - avatar_click % frequency) + "次头像试试看~~");
            avatar_click ++;
        });
    });</script>
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
<script type="text/javascript" src="/js/mouse.js"></script>

<script type="text/javascript" src="/js/custom.js"></script><script type="text/javascript">
            window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());
            gtag('config', 'G-YW4BXSD5CE', { 'anonymize_ip': true });
        </script><script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=G-YW4BXSD5CE" async></script><script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?f8fabc0c58b2b304a6a43c2bc6d0cb86";
			  var s = document.getElementsByTagName("script")[0]; 
			  s.parentNode.insertBefore(hm, s);
			})();
		</script></body>
</html>
